<template>
  <div class="right">
    <div class="head">
      <span class=" active">
        {{ flag == 1 ? "新增" : flag == 2 ? "编辑" : "查看" }}角色
      </span>
      <span class="back" @click="$router.go(-1)">返 回</span>
    </div>
    <div class="content">
      <div class="flex-box">
        <p class="p-title">
          <span>角色信息：</span>
        </p>
        <p class="m-l-24 ">
          <span>角色名称：</span>
          <el-input
            v-model="role_name"
            placeholder="请输入"
            autocomplete="new-password"
          ></el-input>
        </p>
        <!-- <p class="m-l-114 ">
          <span style="width:200px;">所属机构层级： </span>
          <el-cascader
            v-model="level"
            :options="options"
            :props="{ label: 'label', value: 'label' }"
            @change="handleChange"
          ></el-cascader>
        </p> -->
      </div>
      <div class="flex-box">
        <p class="p-title">
          <span>权限配置：</span>
        </p>
      </div>
      <div class="check-scroll">
        <div class="check-box">
          <!-- <div class="flex-check h-88">
            <div class="check-title line-h-88">页面权限</div>
            <div class="check-group">
              <div class="group-flex">
                <div class="h-44 black">
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked1"
                  >
                    <el-checkbox
                      v-for="item in list1"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 ">
                  <span>资源载体库</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked2"
                  >
                    <el-checkbox
                      v-for="item in list2"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="h-44">
                <span>项目化管理</span>
                <el-checkbox-group
                  :disabled="flag == 3 ? 'disabled' : false"
                  v-model="checked3"
                >
                  <el-checkbox
                    v-for="item in list3"
                    :label="item.id"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div class="flex-check h-396">
            <div class="check-title">功能权限</div>
            <div class="check-group">
              <div class="group-flex">
                <div class="h-44">
                  <span>资源载体库</span>
                  <span>数据填报：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked4"
                  >
                    <el-checkbox
                      v-for="item in list4"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 ">
                  <span>项目化管理</span>
                  <span>我的项目：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked5"
                  >
                    <el-checkbox
                      v-for="item in list5"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 ">
                  <span>项目档案：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked6"
                  >
                    <el-checkbox
                      v-for="item in list6"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 ">
                  <span></span>
                  <span>信息台账：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked7"
                  >
                    <el-checkbox
                      v-for="item in list7"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 ">
                  <span>项目化台账：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked8"
                  >
                    <el-checkbox
                      v-for="item in list8"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 ">
                  <span></span>
                  <span>项目日志：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked9"
                  >
                    <el-checkbox
                      v-for="item in list9"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 ">
                  <span></span>
                  <span>项目事项：</span>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 c-666 w-520">
                  <span></span>
                  <span>信息台账：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked10"
                  >
                    <el-checkbox
                      v-for="item in list10"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666 w-430">
                  <span>深入论证：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked11"
                  >
                    <el-checkbox
                      v-for="item in list11"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666">
                  <span>合作协议：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked12"
                  >
                    <el-checkbox
                      v-for="item in list12"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 c-666 w-520">
                  <span></span>
                  <span>投资意向书：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked13"
                  >
                    <el-checkbox
                      v-for="item in list13"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666 w-430">
                  <span>协议初稿：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked14"
                  >
                    <el-checkbox
                      v-for="item in list14"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666">
                  <span>综合审批：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked15"
                  >
                    <el-checkbox
                      v-for="item in list15"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 c-666 w-520">
                  <span></span>
                  <span>立项审批单：</span>

                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked16"
                  >
                    <el-checkbox
                      v-for="item in list16"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666 w-430">
                  <span>协议修改稿：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked17"
                  >
                    <el-checkbox
                      v-for="item in list17"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666">
                  <span>代办手续：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked18"
                  >
                    <el-checkbox
                      v-for="item in list18"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 c-666 w-520">
                  <span></span>
                  <span>项目化台账：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked19"
                  >
                    <el-checkbox
                      v-for="item in list19"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666 w-430">
                  <span>审查意见书：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked20"
                  >
                    <el-checkbox
                      v-for="item in list20"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666">
                  <span>申请验收表：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked21"
                  >
                    <el-checkbox
                      v-for="item in list21"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 c-666 w-520">
                  <span></span>
                  <span>重点报告：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked22"
                  >
                    <el-checkbox
                      v-for="item in list22"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666 w-430">
                  <span>竞争审查表：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked23"
                  >
                    <el-checkbox
                      v-for="item in list23"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666">
                  <span>完成验收表：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked24"
                  >
                    <el-checkbox
                      v-for="item in list24"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 c-666 w-520">
                  <span></span>
                  <span>项目专班：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked25"
                  >
                    <el-checkbox
                      v-for="item in list25"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666 w-430">
                  <span>协议送审稿：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked26"
                  >
                    <el-checkbox
                      v-for="item in list26"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666">
                  <span>终止审批表：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked27"
                  >
                    <el-checkbox
                      v-for="item in list27"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="group-flex">
                <div class="h-44 c-666 w-520">
                  <span></span>
                  <span>管理计划书：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked28"
                  >
                    <el-checkbox
                      v-for="item in list28"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="h-44 c-666 w-430">
                  <span>综合审查：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="checked29"
                  >
                    <el-checkbox
                      v-for="item in list29"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div> -->
          <div class="flex-check h-114">
            <div class="check-title line-h-114">页面权限</div>
            <div class="check-group">
              <div class="h-44 black">
                <el-checkbox-group
                  :disabled="flag == 3 ? 'disabled' : false"
                  v-model="authority1"
                >
                  <el-checkbox
                    v-for="item in option1"
                    :label="item.id"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="h-44 ">
                <span>资源载体库</span>
                <el-checkbox-group
                  :disabled="flag == 3 ? 'disabled' : false"
                  v-model="authority2"
                >
                  <el-checkbox
                    v-for="item in option2"
                    :label="item.id"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="h-44">
                <span>项目化管理</span>
                <el-checkbox-group
                  :disabled="flag == 3 ? 'disabled' : false"
                  v-model="authority3"
                >
                  <el-checkbox
                    v-for="item in option3"
                    :label="item.id"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div class="flex-check h-360">
            <div class="check-title">功能权限</div>
            <div class="check-group">
              <div class="group-flex">
                <div class="h-44">
                  <span>资源载体库</span>
                  <span style="width:136px;">数据填报：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="authority4"
                  >
                    <el-checkbox
                      v-for="item in option4"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>

              <div class="group-flex">
                <div class="h-44 " style="margin-bottom:4px;">
                  <span>项目化管理</span>
                  <span style="width:136px;">台账管理/我的项目：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="authority5"
                  >
                    <el-checkbox
                      v-for="item in option5"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>

              <div class="group-flex">
                <div class="h-44 ">
                  <span></span>
                  <span style="width:136px;">我的项目：</span>
                  <el-checkbox-group
                    :disabled="flag == 3 ? 'disabled' : false"
                    v-model="authority6"
                  >
                    <el-checkbox
                      v-for="item in option6"
                      :label="item.id"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn" @click="submit" v-if="flag != 3">
        保 存
      </div>
    </div>
  </div>
</template>

<script>
import {
  AddEditRole,
  AddEditRole2,
  // GetFixedRole,
  getRoleDetail,
  GetFixedRoleDetail,
  GetFixedRoleDetail2,
  OrgDownBox,
} from "@/api/system";
export default {
  data() {
    return {
      role_id: null,
      flag: 1,
      role_name: "",
      // level: [],
      // options: [],
      // checked1: [],
      // checked2: [],
      // checked3: [],
      // checked4: [],
      // checked5: [],
      // checked6: [],
      // checked7: [],
      // checked8: [],
      // checked9: [],
      // checked10: [],
      // checked11: [],
      // checked12: [],
      // checked13: [],
      // checked14: [],
      // checked15: [],
      // checked16: [],
      // checked17: [],
      // checked18: [],
      // checked19: [],
      // checked20: [],
      // checked21: [],
      // checked22: [],
      // checked23: [],
      // checked24: [],
      // checked25: [],
      // checked26: [],
      // checked27: [],
      // checked28: [],
      // checked29: [],
      // list1: [
      //   { id: 1, name: "招商驾驶舱" },
      //   { id: 2, name: "招商现状图谱" },
      //   { id: 3, name: "产业招商雷达" },
      //   { id: 4, name: "产业招商地图" },
      //   { id: 5, name: "360企业画像" },
      // ],
      // list2: [
      //   { id: 6, name: "产业地图" },
      //   { id: 7, name: "项目选址" },
      //   { id: 8, name: "数据填报" },
      // ],
      // list3: [
      //   { id: 9, name: "项目总览" },
      //   { id: 10, name: "我的项目" },
      //   { id: 11, name: "信息台账" },
      //   { id: 12, name: "项目化台账" },
      //   { id: 13, name: "统计分析" },
      //   { id: 14, name: "绩效排名" },
      //   { id: 15, name: "绩效评分" },
      // ],

      // list4: [
      //   { id: 1, name: "数据导入" },
      //   { id: 2, name: "模板下载" },
      //   { id: 3, name: "批量导出" },
      //   { id: 4, name: "批量删除" },
      //   { id: 5, name: "编辑" },
      //   { id: 6, name: "审核" },
      //   { id: 7, name: "驳回" },
      // ],
      // list5: [
      //   { id: 8, name: "待办提交" },
      //   { id: 9, name: "待办审核" },
      //   { id: 10, name: "待办更新" },
      //   { id: 11, name: "通知查看" },
      //   { id: 12, name: "历史查看" },
      // ],
      // list6: [
      //   { id: 13, name: "档案预览" },
      //   { id: 14, name: "档案下载" },
      // ],
      // list7: [
      //   { id: 15, name: "信息导入" },
      //   { id: 16, name: "模板下载" },
      //   { id: 17, name: "批量导出" },
      //   { id: 18, name: "查看项目" },
      // ],
      // list8: [
      //   { id: 19, name: "信息导入" },
      //   { id: 20, name: "模板下载" },
      //   { id: 21, name: "批量导出" },
      //   { id: 22, name: "查看项目" },
      // ],
      // list9: [
      //   { id: 23, name: "项目日报" },
      //   { id: 24, name: "项目周报" },
      //   { id: 25, name: "项目月报" },
      //   { id: 26, name: "项目季报" },
      //   { id: 27, name: "项目半年报" },
      //   { id: 28, name: "项目年报" },
      //   { id: 29, name: "督办通知单" },
      //   { id: 30, name: "督察报告" },
      //   { id: 31, name: "日志查看" },
      // ],
      // list10: [
      //   { id: 32, name: "编辑" },
      //   { id: 33, name: "查看" },
      // ],
      // list11: [
      //   { id: 34, name: "上传" },
      //   { id: 35, name: "查看" },
      //   // { id: 36, name: "提醒审核" },
      //   // { id: 37, name: "审核" },
      // ],
      // list12: [
      //   { id: 38, name: "上传" },
      //   { id: 39, name: "查看" },
      // ],
      // list13: [
      //   { id: 40, name: "上传" },
      //   { id: 41, name: "查看" },
      //   { id: 42, name: "提醒审核" },
      //   { id: 43, name: "审核" },
      // ],
      // list14: [
      //   { id: 44, name: "上传" },
      //   { id: 45, name: "查看" },
      //   { id: 46, name: "提醒审核" },
      //   { id: 47, name: "审核" },
      // ],
      // list15: [
      //   { id: 48, name: "上传" },
      //   { id: 49, name: "查看" },
      // ],
      // list16: [
      //   { id: 50, name: "上传" },
      //   { id: 51, name: "查看" },
      //   { id: 52, name: "提醒审核" },
      //   { id: 53, name: "审核" },
      // ],
      // list17: [
      //   { id: 54, name: "上传" },
      //   { id: 55, name: "查看" },
      //   { id: 56, name: "提醒审核" },
      //   { id: 57, name: "审核" },
      // ],
      // list18: [
      //   { id: 58, name: "上传" },
      //   { id: 59, name: "查看" },
      // ],
      // list19: [
      //   { id: 60, name: "导入" },
      //   { id: 61, name: "编辑" },
      //   { id: 62, name: "查看" },
      // ],
      // list20: [
      //   { id: 63, name: "上传" },
      //   { id: 64, name: "查看" },
      // ],
      // list21: [
      //   { id: 65, name: "上传" },
      //   { id: 66, name: "查看" },
      // ],
      // list22: [
      //   { id: 67, name: "上传" },
      //   { id: 68, name: "查看" },
      //   { id: 69, name: "提醒审核" },
      //   { id: 70, name: "审核" },
      // ],
      // list23: [
      //   { id: 71, name: "上传" },
      //   { id: 72, name: "查看" },
      // ],
      // list24: [
      //   { id: 73, name: "上传" },
      //   { id: 74, name: "查看" },
      // ],
      // list25: [
      //   { id: 75, name: "编辑" },
      //   { id: 76, name: "查看" },
      // ],
      // list26: [
      //   { id: 77, name: "上传" },
      //   { id: 78, name: "查看" },
      //   { id: 79, name: "提醒审核" },
      //   { id: 80, name: "审核" },
      // ],
      // list27: [
      //   { id: 81, name: "上传" },
      //   { id: 82, name: "查看" },
      //   { id: 83, name: "提醒审核" },
      //   { id: 84, name: "审核" },
      // ],
      // list28: [
      //   { id: 85, name: "上传" },
      //   { id: 86, name: "查看" },
      // ],
      // list29: [
      //   { id: 87, name: "上传" },
      //   { id: 88, name: "查看" },
      // ],
      authority1: [],
      authority2: [],
      authority3: [],
      authority4: [],
      authority5: [],
      authority6: [],
      option1: [
        { id: 1, name: "招商驾驶舱" },
        { id: 2, name: "招商现状图谱" },
        { id: 3, name: "产业招商雷达" },
        { id: 4, name: "产业招商地图" },
        { id: 5, name: "360企业画像" },
      ],
      option2: [
        { id: 6, name: "产业地图" },
        { id: 7, name: "项目选址" },
        { id: 8, name: "数据填报" },
      ],
      option3: [
        { id: 98, name: "项目总览" },
        { id: 99, name: "台账管理" },
        { id: 100, name: "统计分析" },
        { id: 101, name: "我的项目" },
      ],
      option4: [
        { id: 1, name: "数据导入" },
        { id: 2, name: "模板下载" },
        { id: 3, name: "批量导出" },
        { id: 4, name: "批量删除" },
        { id: 5, name: "编辑" },
        { id: 6, name: "审核(批量审核)" },
        { id: 7, name: "驳回" },
      ],
      option5: [
        { id: 108, name: "批量导出" },
        { id: 109, name: "档案下载" },
        { id: 110, name: "项目编辑" },
        { id: 111, name: "调度提醒" },
      ],
      option6: [
        { id: 112, name: "信息导入" },
        { id: 113, name: "模板下载" },
        { id: 114, name: "审核(批量审核)" },
        { id: 115, name: "修改" },
        { id: 116, name: "删除" },
      ],
    };
  },
  mounted() {
    this.flag = this.$route.query.flag;
    // 判断角色权限  请求权限详细数据
    if (this.flag == 2) {
      this.role_id = this.$route.query.id || "";
      this.GetFixedRoleDetail();
    } else if (this.flag == 3) {
      this.role_id = this.$route.query.id || "";
      this.GetFixedRoleDetail();
    }
    // this.OrgDownBox();
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    // 所属机构层级
    async OrgDownBox() {
      let res = await OrgDownBox();
      console.log(res);
      this.options = res;
    },
    // 获取自定义角色权限
    async getRoleDetail() {
      let res = await getRoleDetail({ role_id: this.role_id });
      console.log(res);
      if (res.code && res.code != 0) {
        this.$message.error(res.msg);
      } else {
        this.role_name = res.role_name;
        this.level = [res.org_name, res.department_name];
        this.groupingIdByPage(res.page_data);
        this.groupingIdByFun(res.fun_data);
      }
    },
    // 获取固定角色权限
    async GetFixedRoleDetail() {
      let res = await GetFixedRoleDetail2({ role_id: this.role_id });
      console.log(res);
      if (res.code && res.code != 0) {
        this.$message.error(res.msg);
      } else {
        this.role_name = res.three_role;
        this.level = res.two_department
          ? [res.one_org, res.two_department]
          : [res.one_org];
        this.groupingIdByPage(res.page_permission_id);
        this.groupingIdByFun(res.fun_permission_id);
      }
    },
    // 根绝角色页面查看权限分组
    groupingIdByPage(list) {
      list.map((item) => {
        // if (item > 0 && item <= 5) {
        //   this.checked1.push(item);
        // }
        // if (item > 5 && item <= 8) {
        //   this.checked2.push(item);
        // }
        // if (item > 8 && item <= 15) {
        //   this.checked3.push(item);
        // }
        if (item > 0 && item <= 5) {
          this.authority1.push(item);
        }
        if (item > 5 && item <= 8) {
          this.authority2.push(item);
        }
        if (item > 97 && item <= 101) {
          this.authority3.push(item);
        }
      });
    },
    // 根据角色按钮权限分组
    groupingIdByFun(list) {
      list.map((item) => {
        if (item > 0 && item <= 7) {
          this.authority4.push(item);
        }
        if (item > 107 && item <= 111) {
          this.authority5.push(item);
        }
        if (item > 111 && item <= 116) {
          this.authority6.push(item);
        }
        // if (item > 0 && item <= 7) {
        //   this.checked4.push(item);
        // } else if (item > 7 && item <= 12) {
        //   this.checked5.push(item);
        // } else if (item > 12 && item <= 14) {
        //   this.checked6.push(item);
        // } else if (item > 14 && item <= 18) {
        //   this.checked7.push(item);
        // } else if (item > 18 && item <= 22) {
        //   this.checked8.push(item);
        // } else if (item > 22 && item <= 31) {
        //   this.checked9.push(item);
        // } else if (item > 31 && item <= 33) {
        //   this.checked10.push(item);
        // } else if (item > 33 && item <= 37) {
        //   this.checked11.push(item);
        // } else if (item > 37 && item <= 39) {
        //   this.checked12.push(item);
        // } else if (item > 39 && item <= 43) {
        //   this.checked13.push(item);
        // } else if (item > 43 && item <= 47) {
        //   this.checked14.push(item);
        // } else if (item > 47 && item <= 49) {
        //   this.checked15.push(item);
        // } else if (item > 49 && item <= 53) {
        //   this.checked16.push(item);
        // } else if (item > 53 && item <= 57) {
        //   this.checked17.push(item);
        // } else if (item > 57 && item <= 59) {
        //   this.checked18.push(item);
        // } else if (item > 59 && item <= 62) {
        //   this.checked19.push(item);
        // } else if (item > 62 && item <= 64) {
        //   this.checked20.push(item);
        // } else if (item > 64 && item <= 66) {
        //   this.checked21.push(item);
        // } else if (item > 66 && item <= 70) {
        //   this.checked22.push(item);
        // } else if (item > 70 && item <= 72) {
        //   this.checked23.push(item);
        // } else if (item > 72 && item <= 74) {
        //   this.checked24.push(item);
        // } else if (item > 74 && item <= 76) {
        //   this.checked25.push(item);
        // } else if (item > 76 && item <= 80) {
        //   this.checked26.push(item);
        // } else if (item > 80 && item <= 84) {
        //   this.checked27.push(item);
        // } else if (item > 84 && item <= 86) {
        //   this.checked28.push(item);
        // } else if (item > 86 && item <= 88) {
        //   this.checked29.push(item);
        // }
      });
    },
    // 提交数据
    submit() {
      // let page_id_list = [...this.checked1, ...this.checked2, ...this.checked3];
      // let fun_id_list = [
      //   ...this.checked4,
      //   ...this.checked5,
      //   ...this.checked6,
      //   ...this.checked7,
      //   ...this.checked8,
      //   ...this.checked9,
      //   ...this.checked10,
      //   ...this.checked11,
      //   ...this.checked12,
      //   ...this.checked13,
      //   ...this.checked14,
      //   ...this.checked15,
      //   ...this.checked16,
      //   ...this.checked17,
      //   ...this.checked18,
      //   ...this.checked19,
      //   ...this.checked20,
      //   ...this.checked21,
      //   ...this.checked22,
      //   ...this.checked23,
      //   ...this.checked24,
      //   ...this.checked25,
      //   ...this.checked26,
      //   ...this.checked27,
      //   ...this.checked28,
      //   ...this.checked29,
      // ];
      let page_id_list = [
        ...this.authority1,
        ...this.authority2,
        ...this.authority3,
      ];
      let fun_id_list = [
        ...this.authority4,
        ...this.authority5,
        ...this.authority6,
      ];

      this.AddRole(page_id_list, fun_id_list);
    },
    // 添加角色接口
    async AddRole(page_id_list, fun_id_list) {
      let res = await AddEditRole2({
        flag: this.flag,
        role_id: this.role_id || "",
        role_name: this.role_name,
        page_id_list,
        fun_id_list,
      });
      console.log(res);
      if (res.code && res.code != 0) {
        this.$message.error(res.msg);
      } else {
        this.$message.success(res.msg);
        setTimeout(() => {
          this.$router.go(-1);
        }, 800);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  padding: 0 30px;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
.head {
  position: relative;
  // padding-left: 20px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  background: #ffffff;
  // box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  border-bottom: 4px solid #ccc;
  text-align: left;
  span {
    margin-right: 75px;
    display: inline-block;
    height: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
  .back {
    position: absolute;
    top: 21px;
    right: 0;
    width: 100px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #5889dc;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
  }
}
.content {
  padding: 30px 0 0;
  height: calc(100% - 80px);
  overflow: hidden;

  .flex-box {
    display: flex;
    text-align: left;
    p.m-l-24 {
      margin-left: 24px;
    }
    p.m-l-114 {
      margin-left: 24px;
    }
    .p-title span {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
    span {
      display: block;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      margin-bottom: 10px;
    }
    /deep/ .el-input,
    /deep/ .el-input__inner {
      width: 420px;
      height: 32px;
      line-height: 32px;
    }
    /deep/.el-select .el-input .el-select__caret {
      line-height: 32px;
    }
  }
  .h-44 {
    height: 38px;
    line-height: 38px;
  }
  .h-396 {
    height: 460px;
    line-height: 460px;
  }
  .h-360 {
    height: 360px;
    line-height: 360px;
  }
  .line-h-114 {
    line-height: 114px;
  }
  .line-h-88 {
    line-height: 88px;
    // line-height: 88px;
  }
  .check-scroll {
    width: 100%;
    overflow: auto;
    scrollbar-color: #446db3 #ecf2fb; //滚动条轨道颜色   滚动条滑块的颜色
    scrollbar-width: 12px;
    scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 12px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 12px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 12px;
      background: #446db3;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      background: #e9f3ff;
      background: rgba(97, 142, 223, 0.1);
      border-radius: 12px;
    }
  }
  .check-box {
    display: flex;
    flex-direction: column;
    width: 1530px;
    .flex-check {
      display: flex;
      margin-bottom: 4px;
      & > div {
        margin-bottom: 4px;
        background: #f5f6f7;
      }
      .check-title {
        width: 90px;
        height: 100%;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }
      .check-group {
        padding-left: 30px;
        margin-left: 4px;
        flex: 1;
        height: 100%;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        text-align: left;
        .group-title {
          width: 100px;
          font-size: 14px;
          font-weight: bold;
          color: #666666;
        }
      }
    }
  }
  .group-flex {
    display: flex;
    // justify-content: space-between;
  }
  /deep/ .el-checkbox__label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  /deep/ .black .el-checkbox__input.is-checked + .el-checkbox__label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }

  /deep/.el-checkbox {
    width: 124px;
    margin: 0;
  }
  span {
    display: inline-block;
    width: 124px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .c-666 span {
    color: #666;
  }
  /deep/.el-checkbox-group {
    display: inline-block;
    margin-right: 30px;
  }
}
.w-520 {
  width: 520px;

  /deep/.el-checkbox-group {
    display: inline-block;
    margin-right: 10px;
  }
}
.w-430 {
  width: 430px;
  /deep/.el-checkbox-group {
    display: inline-block;
    margin-right: 10px;
  }
}
.btn {
  margin: 18px auto;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #446db3;
  border-radius: 8px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  cursor: default;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0042b2;
  border-color: #0042b2;
}
/deep/ .el-cascader {
  line-height: 32px;
}
/deep/ .el-input__icon {
  line-height: 32px;
}

/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .check-scroll {
    height: 500px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .check-scroll {
    height: 450px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .check-scroll {
    height: 500px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .content .flex-box .el-input,
  /deep/ .content .flex-box .el-input__inner {
    width: 360px;
  }
  .check-scroll {
    height: 580px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .content .flex-box .el-input,
  /deep/ .content .flex-box .el-input__inner {
    width: 300px;
  }
  .check-scroll {
    height: 420px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .content .flex-box .el-input,
  /deep/ .content .flex-box .el-input__inner {
    width: 200px;
  }
  .check-scroll {
    height: 360px;
  }
}
</style>
